﻿<template>
  <el-dialog v-drag :title = 'importTitle' :visible.sync = 'visibleDialog' width = '50%'
  :close-on-press-escape = 'false' :close-on-click-modal = 'false' append-to-body>
    <el-form label-position = 'left' v-loading = 'progressLoading' :element-loading-text = 'progressLoadingText' element-loading-spinner = "el-icon-loading"
    label-width = '170px'>
      <el-form-item label = '请选择需要导入的文件：'>
        <el-upload ref = 'upload' :action = 'actionUrl' :limit = 'limit' :auto-upload = "true" :file-list = 'fileList' drag
        :on-exceed = 'onExceed' :http-request = "submitUpload">
          <i class = "el-icon-upload"></i>
          <div class = "el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-form-item class = 'form_noLeftMargin'>
        <el-button type = "primary" @click = "closeImportDialog">关 闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  // 需要三个参数
  // 1、importDialog-弹窗打开或关闭的变量
  // 2、importTitle-本次导入的主题
  // 3、importApiRouter-本次导入的地址
  props: ['importDialog', 'importTitle', 'importApiRouter'],
  data () {
    return {
      visibleDialog: false,
      // 导入时的loading显示
      progressLoadingText: '文件导入中...',
      progressLoading: false,
      // 上传相关
      actionUrl: `${$URL.IMG_UPLOAD_URL}`,
      fileList: [],
      fileReader: '',
      limit: 1
    }
  },
  mounted () {
    if (!window.FileReader) {
      this.$message({
        message: '您的浏览器不支持 FileReader API',
        type: 'error'
      })
    } else {
      this.fileReader = new FileReader()
    }
  },
  methods: {
    // 初始化页面信息
    initComponent () {
      // 初始化下载相关的信息
      this.fileList = []
      // 类型为progressBar时的信息
      this.progressLoading = false
    },
    // 关闭导入的弹窗时
    closeImportDialog () {
      this.$confirm('确定要放弃' + this.importTitle + '的操作么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'el-button--info'
      }).then(() => {
        this.$emit('giveUpImportOperation')
      }).catch(() => {})
    },
    // 上传相关的方法-------------------上传相关
    // 文件超过最大上传个数时
    onExceed () {
      this.$message({
        message: '最多只能上传' + this.limit + '个文件',
        type: 'warning'
      })
    },
    // 上传文件的方法
    submitUpload (options) {
      this.progressLoading = true
      let file = options.file
      let filename = file.name
      let fileLength = file.size
      let fileType = file.type
      if (file) {
        this.fileReader.readAsDataURL(file)
      }
      this.fileReader.onload = () => {
        let base64Str = this.fileReader.result
        let messageObj = {
          filetype: fileType,
          filename: filename,
          filelength: fileLength,
          file: base64Str.split(',')[1]
        }
        /* global $URL */
        this.$patch(this.importApiRouter, {
          data: JSON.stringify(messageObj)
        }).then(data => {
          let dataResult = data.data.result
          if (dataResult.code === 'success') {
            let obj = {
              name: filename,
              url: dataResult.link_url + '/name/' + filename
            }
            this.fileList.push(obj)
            this.progressLoading = false
            this.$emit('finishedImportOperation')
          } else {
            this.$message({
              message: dataResult.msg,
              type: 'error',
              duration: 5000
            })
          }
        }).catch(error => {
          console.log(error)
        })
      }
    }
  },
  watch: {
    importDialog: {
      handler: function (val, oldVla) {
        this.visibleDialog = val
        if (val) {
          this.initComponent()
        }
      }
    }
  }
}
</script>
